<script setup lang="ts">
interface Props {
	title: string
	value: string
	icon?: string
	image?: string // 支持图片图标
}
const props = defineProps<Props>()
</script>

<template>
	<div class="min-h-[104px] px-7 py-6 flex items-center gap-x-5 bg-primary rounded-lg">
		<!-- 图标或图片 -->
		<div class="size-[54px] rounded-full bg-secondary flex items-center justify-center">
			<img
				:src="image"
				class="size-full object-contain"
				:alt="title"
			/>
		</div>

		<!-- 内容区 -->
		<div class="flex-1">
			<div class="text-xs leading-5 text-tertiary">{{ title }}</div>
			<div class="text-6 leading-8 text-primary mt-1">{{ value }}</div>
		</div>
	</div>
</template>
